<style>
.borderc{
 /* border: 1px solid red; */
 width: 45%;
 height: 500px;
 float: left;
 margin-left: 10px;
 
 
}
.contenttext{
  margin-top: 120px;
  width: 50%;
  margin-left: 25%;
  font-size: 20px;
  text-align: center;
   background-color: rgba(242, 242, 242, 1);
   border-radius:15px;
}
.smallcontent{
  line-height: 40px;
 
}
</style>

<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <!-- <el-input v-model="dataForm.time" placeholder="日期段" clearable></el-input> -->
        <el-select class="form-item" v-model="dataForm.time" placeholder="请选择">
            <el-option
              v-for="item in ztoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
    </el-form>
  <div class="borderc">
      <div class="contenttext">
     <!-- <span class="smallcontent"> 时间段：{{timesjd}} </span><br> -->

      <span class="smallcontent">开始时间：{{time0}}</span><br>

      <span class="smallcontent">结束时间：{{time1}}</span><br>

      <span class="smallcontent">历经时长：{{timesjc}}小时</span><br>

     <span class="smallcontent"> 维度：</span><br>

      <span class="smallcontent">总降雨量：{{timezjyl}}毫米</span><br>
      </div>
  </div>
  <div class="borderc">
       <div id="left1" style="width:600px;height:450px;border:1px solid red">

       </div> 
  </div>

    <details-dialog v-if="detailsVisible" ref="detailsDialog"></details-dialog>

  </div>
</template>

<script>
  import AddOrUpdate from './bussinspectiontask-add-or-update'
   import DetailsDialog from './bussinspectiontask-details'
  


  export default {
    data () {
      return {
        time:null,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataForm: {
          key: ''
        },
        ztoptions: [{
          value: Number('0'),
          label: '昨天'
        }, {
          value: Number('1'),
          label: ' 今天'
        }, {
          value: Number('2'),
          label: ' 第一季度'
        }, {
          value: Number('3'),
          label: ' 第二季度'
        }, {
          value: Number('4'),
          label: ' 第三季度'
        }, {
          value: Number('5'),
          label: ' 第四季度'
        }],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        detailsVisible: false,
        time0:'',
        time1:'',
        timesjd:'昨天',
        timezjyl:'',
        timesjc:'',
        
      }
    },
    components: {
      AddOrUpdate,
      DetailsDialog
    },
    activated () {
      this.getDataList()
      
    },
    mounted () {
      
      this.getechar()
    
    },
    methods: {
      // 获取数据列表
      getDataList () {
        var str=''
        if(this.time!=null&&this.time.length>1){
          var str1=this.time[0]
          var str2=this.time[1]
          str=str1+' - '+str2
        }   
        this.$http({
          url: this.$http.adornUrl('/buss/bussrturecord/listtotal'),
          method: 'get',
          params: this.$http.adornParams({
            'time':str
            // 'page': this.pageIndex,
            // 'limit': this.pageSize,
            // 'name': this.dataForm.name,
            // 'bh': this.dataForm.bh
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            debugger
            // this.dataList = data.page.list
            // this.totalPage = data.page.totalCount
            if(data.page.length>0){
                var s0 = data.page[0].ljjy
                var s1 = data.page[1].ljjy

                var t0 = data.page[0].createTime
                var t1 = data.page[1].createTime
                if(s0!=null && s1!=null){
                  this.timezjyl = Number(s1.substring(0,s1.length-2)) - Number(s0.substring(0,s0.length-2))
                }
                if(t0!=null && t1!=null){
                  this.timesjc = this.formattime(t0,t1);
                }
               
                this.time0 = data.page[0].createTime
                this.time1 = data.page[1].createTime
                console.log(data.page[0]);
                console.log(data.page[1]);
            }
            
          } else {
            
          }
          this.dataListLoading = false
        })
      },
      formattime(startTime, finishTime){
          var date1 = new Date(startTime)
          var date2 = new Date(finishTime)
          if(finishTime == null||finishTime == ''){
             date2 = new Date(new Date)
          }
          var s1 = date1.getTime(),s2 = date2.getTime();

          var total = (s2 - s1)/1000;

          var day = parseInt(total / (24*60*60));//计算整数天数

          var afterDay = total - day*24*60*60;//取得算出天数后剩余的秒数

          var hour = parseInt(afterDay/(60*60));//计算整数小时数

          var afterHour = total - day*24*60*60 - hour*60*60;//取得算出小时数后剩余的秒数

          var min = parseInt(afterHour/60);//计算整数分

          var afterMin = total - day*24*60*60 - hour*60*60 - min*60;//取得算出分后剩余的秒数
          return day*24+hour+"时";
      },
      getechar(){
        var yf = [];
        this.$http({
          url: this.$http.adornUrl('/buss/bussrturecord/listtotal12'),
          method: 'get',
          params: this.$http.adornParams({
           
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
           if(data.page.length>0){
             for(var i = 0;i<data.page.length;i++){
               var n = data.page[i];
               var onz = '';
               if(i>0){
                 onz = data.page[i-1];
               }
              
               if(n!=null&&n!=""){
                 if(n.ljjy!=null&&n.ljjy!=''){
                    //如果上个月不为空
                    debugger
                    if(i > 0 && n[i-1] != '0'){
                      console.log(n.ljjy.substring(0,n.ljjy.length-2))
                      console.log(yf[i-1])
                     
                      var num = Number(n.ljjy.substring(0,n.ljjy.length-2)) - Number(onz.ljjy.substring(0,onz.ljjy.length-2))
                      yf.push(num);
                    }else{
                    yf.push(n.ljjy.substring(0,n.ljjy.length-2));
                    }
                 }else{
                    yf.push('0');
                 }
                 
               }else{
                 yf.push('0');
               }
             }
           }

             var XData=["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", 
        "九月", "十月", "十一月", "十二月"];
        var yData = yf;
        // XData.map(function(){
        //     yData.push((Math.random()*1000+100).toFixed(0))
        // })
        var dataMin=parseInt(Math.min.apply(null, yData)/2);
        for(var i=0;i<XData.length;i++){
            
        }
        var option = {
            backgroundColor:"#080f15",
            xAxis: {
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                data: XData,
                axisLabel: {
                    formatter: function(value) {
                        var ret = ""; //拼接加\n返回的类目项
                        var maxLength = 1; //每项显示文字个数
                        var valLength = value.length; //X轴类目项的文字个数
                        var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1) //如果类目项的文字大于3,
                        {
                            for (var i = 0; i < rowN; i++) {
                                var temp = ""; //每次截取的字符串
                                var start = i * maxLength; //开始截取的位置
                                var end = start + maxLength; //结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        } else {
                            return value;
                        }
                    },
                    interval: 0,
                    fontSize: 16,
                    fontWeight: 100,
                    textStyle: {
                        color: '#9faeb5',

                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#4d4d4d'
                    }
                }
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                min: dataMin,
                axisLabel: {
                    textStyle: {
                        color: '#9faeb5',
                        fontSize: 16,
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#4d4d4d'
                    }
                }
            },
            "tooltip": {
              "trigger": "item",
              "textStyle": {
                "fontSize": 12
              },
              "formatter": "{b0}:{c0}"
            },
            series: {
                type:"bar",
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#00d386' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#0076fc' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        barBorderRadius: 15,
                    }
                },
                // barWidth: 7,
                data: yData
            }
        };
        var myChartGaugeOption = echarts.init(document.getElementById('left1'))
          console.log(document.getElementById('left1'));
        // myChartGaugeOption.setOption(option)
          setTimeout(myChartGaugeOption.setOption(option), 1500);
            
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })


       
          }
   
    }
  }

</script>
